<script setup>
import Biology from "@/views/Discover/cpns/Biology.vue";
import Temperature from "@/views/Discover/cpns/Temperature.vue";
import Chlorophyll from "@/views/Discover/cpns/Chlorophyll.vue";
import Affect from "@/views/Discover/cpns/Affect.vue";
import RedArea from "@/views/Discover/cpns/RedArea.vue";
import Monitor from "@/views/Discover/cpns/Monitor.vue";
import SettingTable from "@/components/SettingTable.vue";
import Footer from "@/components/Footer.vue";
import {computed, onMounted, ref, watch, watchEffect} from "vue";
import {ElMessageBox} from "element-plus";
import DiscoverTime from "@/views/Discover/cpns/DiscoverTime.vue";
import useDiscoverStore from "@/stores/modules/useDiscover";
import {storeToRefs} from "pinia";
import {getRedTideArea} from "@/service/modules/discover";

//拉取数据
const discoverStore=useDiscoverStore()
discoverStore.fetchOrganism()
discoverStore.fetchTemperatures()
discoverStore.fetchChlorophyll()
discoverStore.fetchRedTideNews()
discoverStore.fetchRedTideDistribution()
discoverStore.fetchRedTideDiscovery()
discoverStore.fetchRedTideArea()
//生物量+温度+叶绿素
const {organism,temperatures,chlorophyll,redTideNews,redTideDistribution,redTideDiscovery,redTideArea}=storeToRefs(discoverStore)

const params = ref([
  {
    label: "海洋温度权重",
    value: ""
  },
  {
    label: "叶绿素权重",
    value: ""
  },
  {
    label: "人为污染权重",
    value: ""
  },
  {
    label: "洋流权重",
    value: ""
  },
  {
    label: "其他权重",
    value: ""
  },
])

//设置按钮位置
const monitor = ref(null)
const setBtn = ref(null)
let offsetRight=ref(0)
const dom=ref(document.documentElement)

//打开对话框
const isShowSetting = ref(false)
const openDialog=()=>{
  // console.log(isShowSetting.value )
  isShowSetting.value = true
}
// 关闭对话框
const handleClose = (done) => {
  ElMessageBox.confirm('Are you sure to close this dialog?')
      .then(() => {
        done()
      })
      .catch(() => {
        // catch error
      })
}


</script>

<template>
  <div class="home">

    <div class="settingTable">
      <el-dialog
          v-model="isShowSetting"
          width="800"
      >
        <div>
          <setting-table :params="params"></setting-table>
        </div>
      </el-dialog>
    </div>
    <div class="content">
      <div class="setBtn" ref="setBtn" @click="openDialog">
        设置参数
      </div>
      <section class="content-left">
        <Biology :before_year_data="organism.before_year_data" :last_year_data="organism.last_year_data"></Biology>
        <Temperature :temperatures="temperatures"></Temperature>
        <Chlorophyll :chlorophyll="chlorophyll"></Chlorophyll>
      </section>
      <div class="center">
        <Monitor :redTideNews="redTideNews" :redTideDistribution="redTideDistribution" ref="monitor"></Monitor>
      </div>
      <section class="content-right">
        <Affect></Affect>
        <DiscoverTime :redTideDiscovery="redTideDiscovery"></DiscoverTime><!--补加-->
        <RedArea :redTideArea="redTideArea"></RedArea>
      </section>
    </div>

  </div>
  <Footer></Footer>
</template>

<style scoped>
body, ul, li, a {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}
.content{
  position: relative;
  width:100%;
  height:600px;
  background:#f1f1f3;
  .setBtn {
    background-color: #fff;
    padding: 5px 10px;
    width: 80px;
    font-size: 16px;
    height: 20px;
    text-align: center;
    line-height: 1;
    position: absolute;
    right: 10px;
    z-index: 9;
    border-radius: 0 0 8px 8px;
    cursor: pointer;
  }
}
.content-left{
  position:absolute;
  /*height:600px;!**!*/
  height: 100%;
  float:left;
  width:30%;
  /*border:1px solid red;*/
}

.content-right{
  position:absolute;
  left:70%;
  /*height:600px;*/
  height: 100%;
  width:30%;/**/
}
.center{
  position:absolute;
  left:30%;
  width:40%;
  //height:600px;
  //height: 100%;

}


.home {
  height: 100%;
  //overflow: hidden;
  background-color: #100c2a;
  position: relative;
}

.settingTable {
  //margin-top: 40px;
  //height: 20%;
}

.content {
  display: flex;
  align-items: stretch;
  //width: 100%;
  height: 75vh;
  background: #100c2a;

}

.content-left {
  flex-grow: 3;
  display: flex;
  flex-direction: column;
}

.content-right {
  flex-grow: 3;
  display: flex;
  flex-direction: column;
}

@media screen and (max-width: 2000px) {
  .home {
    //height: 620px;
    //background-color: #100c2a;
  }

  .content {
    width: 100%;
    height: 620px;/*600*/
    /*border:1px solid red;
    justify-content:space-between;
    background:darkblue;*/
    .setBtn{
      right:1px;
      z-index:1;
    }
  }

  .content-left {
    padding:0px;
    margin:0px;
    position: absolute;
    height: 620px; /*600*/
    float: left;
    width: 30%;
    /*border:1px solid red;*/
  }

  .content-left1 {
    /*position:absolute;*/
    height: 30%;
    /*border:1px solid black;*/
  }

  .content-left2 {
    /*position:absolute;*/
    height: 30%;
    /*border:1px solid black;*/
  }

  .content-left3 {
    /*position:absolute;*/
    height: 40%;
    /*border:1px solid black;*/
  }

  .content-center {
    position: absolute;
    /*left: 30%;*/
    width: 100%;
    height: 580px; /*600*/
    /*border:1px solid green;*/
  }

  .sea-rank > span {
    left: 15px;
  }

  .sea-rank > span:nth-child(2) {
    color: red;
  }

  .content-center2 {
    /*position:absolute;*/
    height: 70%;
    /*border:1px solid black;*/
  }

  .content-right {
    padding:0;
    margin:0;
    position: absolute;
    /*left: 69%; 70*/
    height: 620px; /*600*/
    width: 30%; /*30*/
    /*border:1px solid red;*/
  }

  .content-right2 {
    /*position:absolute;*/
    height: 33%;
    /*border:1px solid black;*/
  }

  .content-right3 {
    /*position:absolute;*/
    height: 33%;
    /*border:1px solid black;*/
  }
  ::v-deep .el-dialog{
    height:17vw;
  }
  .heat-right1{
    margin:0;
    padding:0;
    /*border:1px solid red;*/
    height:16vw;
    transform: translateY(-25px);
  }
  .footer{
    top:680px;
  }
}

</style>
<!--2024/2/2 12:33-->